<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/TopButtomMain.css" rel="stylesheet">
</head>
<body>
<!--包不了-->
<div class="top-nav">
<div th:include="common/IncludeTop :: myhead"></div>
<div class="main-promote">
<!--包不了-->
<div class="container clearf">
    <div class="col-2 cat" >
        <ul>
                <li th:each="category:${categoryList}">
                    <font color="white" th:text="${category.getName()}"></font>
                    <div class="div1">
                        <div th:each="product:${category.getProductList()}">
                            <div class="av"><img src="${product.getDesc}" alt="${product.getName}" title="${product.getName}" /></div>
<!--                            <a href="#"><font color="black" size="1"><strong>${item2.name}</strong></font>></a>-->
<!--                            <br>-->
                            <h1>你好呀</h1>
                        </div>
                    </div>
                </li>
        </ul>
    </div>
    <div class="col-6">
        <div class="slider">
            <img src="/images/PetStoreTitleMain.jpeg" alt="首页图" height="250">
        </div>
    </div>
    <div class="col-2 info">
        <div class="auth clearf">
            <div class="avatar"><img src="/images/piKaQiu.jpeg" alt="皮卡丘" title="皮卡丘" /></div>
            <b>你好，欢迎来到JpetStore.</b>
        </div>
        <div class="anno">
            <div class="title"><b>宠物物语</b></div>
            <div class="content">
                1.每天趴在窗户边等你回来，是我一天当中最快乐的一刻。
                <br>
                2.你小心翼翼绽放的微笑，脆弱又美好，让我毫不设防地走进你。
                <br>
                3.对一只狗好，也许只花你一部分的时间，而它，却将一辈子回报于你。
            </div>
        </div>
    </div>
</div>
</div>

<div id="inform"></div>

<div class="container clearf">
    <div class="cat-promote">
        <div class="title">宠物鱼</div>
        <div class="content">
            <div class="col-3 item">

                <div class="card">
                    <a href="viewProduct?productId=JL-01"><img src="/images/fishMain4.png" alt="锦鲤" title="锦鲤" height="300" class="JL-01" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>

            </div>
            <div class="col-3 item">

                <div class="card">
                    <a href="viewProduct?productId=YW-02"><img src="/images/fishMain2.jpg" alt="财神鹦鹉" title="财神鹦鹉" height="300"class="YW-02" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=LJKLY-03"><img src="/images/fishMain3.jpg" alt="六角恐龙鱼" title="六角恐龙鱼" height="300"class="LJKLY-03" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=KQY-04"><img src="/images/fishMain.png" alt="孔雀鱼" title="孔雀鱼" height="300"class="KQY-04" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cat-promote">
        <div class="title">宠物狗</div>
        <div class="content">
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=JM-01"><img src="/images/DogMain.jpg" alt="金毛" title="金毛" height="300"class="JM-01" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=HSQ-02"><img src="/images/DogMain2.jpg" alt="哈士奇" title="哈士奇" height="300"class="HSQ-02" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=CQ-03"><img src="/images/DogMain3.jpg" alt="柴犬" title="柴犬" height="300"class="CQ-03" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=LBLD-04"><img src="/images/DogMain4.jpg" alt="拉布拉多" title="拉布拉多" height="300"class="LBLD-04" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cat-promote">
        <div class="title">宠物猫</div>
        <div class="content">
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=ZHTYM-04"><img src="/images/CatMain.jpg" alt="英国短毛猫" title="英国短毛猫" height="300"class="ZHTYM-04" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=YGDMM-01"><img src="/images/CatMain2.png" alt="布偶猫" title="布偶猫" height="300"class="YGDMM-01" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=BOM-02"><img src="/images/CatMain3.jpg" alt="俄罗斯蓝猫" title="俄罗斯蓝猫" height="300"class="BOM-02" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=ELSLM-03"><img src="/images/CatMain4.jpeg" alt="中华田园猫" title="中华田园猫" height="300"class="ELSLM-03" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cat-promote">
        <div class="title">爬行动物</div>
        <div class="content">
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=BXG-01"><img src="/images/turtleMain.jpg" alt="巴西龟" title="巴西龟" height="300"class="BXG-01" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=YOG-02"><img src="/images/turtleMain2.jpg" alt="圆澳龟" title="圆澳龟" height="300"class="YOG-02" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=XZZ-03"><img src="/images/spiderMain.jpg" alt="小蜘蛛" title="小蜘蛛" height="300"class="XZZ-03" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=SG-04"><img src="/images/LizardMain.jpeg" alt="守宫" title="守宫" height="300"class="SG-04" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="cat-promote">
        <div class="title">宠物鸟</div>
        <div class="content">
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=BWN-01"><img src="/images/baiWenBirdMain.jpg" alt="白文鸟" title="白文鸟" height="300"class="BWN-01" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-3 item">
                <div class="card">
                    <a href="viewProduct?productId=FRN-02"><img src="/images/fuRongBirdMain.png" alt="芙蓉鸟" title="芙蓉鸟" height="300"class="FRN-02" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=MTY-03"><img src="/images/owlMain.jpeg" alt="猫头鹰" title="猫头鹰" height="300"class="MTY-03" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
            <div class="col-2 item">
                <div class="card">
                    <a href="viewProduct?productId=MDYW-04"><img src="/images/parrotMain.jpg" alt="牡丹鹦鹉" title="牡丹鹦鹉" height="300"class="MDYW-04" onmouseover="overFn1(this)" onmouseout="outFn1()"/></a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<th:if test="${sessionScope.account!=null}">
    <div class="container clearf">
        <div class="cat-promote">
            <div class="title">为您推荐</div>

            <div class="col-2 item" >
                ${sessionScope.account.bannername}
                <h3>${sessionScope.account.userid}，欢迎来到宠物商店！</h3>
</th:if>
<th:if test="${sessionScope.account==null}">
    <h3>您还没有登录哦~</h3>
</th:if>

</div>
</div>
</div>
<div th:insert="common/IncludeBottom :: myfooter"></div>
</body>
</html>